<template>
  <div class="visit-chart" ref="visitchartdom"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "VisitEcharts",
  components: {},
  data() {
    return {
      charts: null,
    };
  },
  methods: {
    initCharts() {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.visitchartdom);
        this.setOptionFun();
      });
    },
    // 设置图标数据，生成图标
    setOptionFun() {
      const option = this.getOption();
      this.charts.setOption(option);
    },
    // 获取数据
    getOption() {
      const option = {
        title: {
          text: "",
          subtext: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["曝光量", "访客量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "曝光量",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "访客量",
            type: "bar",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            markPoint: {
              data: [
                { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      };

      return option;
    },
    // 本函数 写 监听 container DOM 元素大小的改变
    watchContainerResize() {
      // 作用：监听 指定 DOM 元素 大小的改变
      this.observeContainer = new ResizeObserver(() => {
        this.charts.resize();
      });

      this.observeContainer.observe(this.$refs.visitchartdom);
    },
  },
  mounted() {
    this.initCharts();
    this.watchContainerResize();
  },

  beforeDestroy() {
    this.charts.dispose();

    // 释放 ResizeObserver 监听的 DOM元素 对应的 内存
    this.observeContainer.unobserve(this.$refs.visitchartdom);
  },
};
</script>

<style scoped lang="scss">
.visit-chart {
  width: 100%;
  height: 100%;
}
</style>
